<script setup>
import { ref } from 'vue'
import { useUserStore } from '../stores/user'
import { useRouter } from 'vue-router'

const router = useRouter()
const store = useUserStore()
const form = ref({
  email: 'test@example.com',
  password: 'password'
})
const errors = ref({})

const handleLogin = async () => {
  try {
    await store.login(form.value)
    router.push('/profile')
  } catch (error) {
    errors.value = error.errors || {}
  }
}
</script>

<template>
  <form @submit.prevent="handleLogin">
    <div>
      <label>Email</label>
      <input v-model="form.email" type="email">
      <span v-if="errors.email">{{ errors.email[0] }}</span>
    </div>
    <div>
      <label>Password</label>
      <input v-model="form.password" type="password">
      <span v-if="errors.password">{{ errors.password[0] }}</span>
    </div>
    <button type="submit">Login</button>
  </form>
</template>